<template>
  <!-- 整体布局 -->
  <div class="layout_main">
    <!-- 头部区域，品牌名称+全部商品 -->
    <div class="top">
      <div class="top_inner">
        <div v-for="item in title" :key="item.id">
          <div class="nav">{{ item.b_name }}</div>
          <div class="t_nav">{{ item.s_name }}</div>
        </div>
      </div>
    </div>
    <!-- 中底部区域，图片+标题+更多选项 -->
    <div class="bottom" 
      :style="`padding-top:${data.blockStyle.proPadding / 2}px;
      padding-bottom:${data.blockStyle.proPadding / 2}px;
      margin-left:${data.blockStyle.pageMargin}px;
      margin-right:${data.blockStyle.pageMargin}px`">
      <div :class="data.blockClass == 'row_two' ? 'goods_part goods_separate' : 'goods_part'">
        <img class="goods_img" src="../imgs/product-none.png" />
        <div class="text_row">
          <div class="m_title">{{data.blockList.block_value.goods_name}}</div>
          <!-- 商品卖点 -->
          <div class="s_title" v-if="data.blockStyle.showSell">{{data.blockList.block_value.goods_des}}</div>
          <div class="limit_row">
            <!-- 商品限购 -->
            <div class="time_cell">{{data.blockList.block_value.time_cell}} <span v-if="data.blockStyle.showLimit">| 限购{{data.blockList.block_value.limit_num}}份</span> </div>
            <div class="last_num">仅剩<span>{{data.blockList.block_value.last_num}}</span>份</div>
          </div>
          <!-- 是否展示标签 -->
          <div class="tag-list" v-if="data.blockStyle.showTag">
            <div class="tag-item" v-for="(item,index) in data.blockList.block_value.tag_list" :key="index">{{item.name}}</div>
          </div>
          <div class="sale_row">
            <div class="sale_price">
              <!-- 价格 -->
              <span class="price">¥{{data.blockList.block_value.price}}</span>
              <!-- 划线价 -->
              <span class="old" v-if="data.blockStyle.showScribing">¥{{data.blockList.block_value.old}}</span>
            </div>
            <div class="sale_btn">加入购物车</div>
          </div>
        </div>
      </div>
      <div class="goods_sold">
        <!-- 购买记录 -->
        <div>
          <img v-for="(item,index) in data.blockList.block_value.purchase_img" :style="{left: index * 24 + 'px'}" class="purchase_img" :src="item" alt="" :key="index">
          <div class="goods_someone">等人购买了此商品。</div>
        </div>
        <!-- 累计销量 -->
        <div>
          <span v-if="data.blockStyle.showCumulative">累计已售{{data.blockList.block_value.cumulative > 999 ? '999+' : data.blockList.block_value.cumulative}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from "../mixin";
import request from "@/utils/request";
import { domain } from "~/ui-domain";

const noImg =
  "";
export default {
  data() {
    return {
      title: [
        { b_name: "鲜美水果", s_name: "补充维生素" },
        { b_name: "安心蔬菜", s_name: "营养又健康" },
        { b_name: "鲜肉禽蛋", s_name: "农场直供" },
        { b_name: "休闲零食", s_name: "好吃看得见" },
        { b_name: "鲜花", s_name: "美好" }
      ]
    };
  },
  name: "tpl_9001",
  mixins: [mixin],
  title: "社团商品",
  dataTpl: {
    tpl_id: 9001,
    blockList: 
      {
        block_type: 'SheTuan',
        block_value: {
          'id': null,
          'goods_image': noImg,
          'goods_name': '商品名称',
          'goods_des': '商品卖点',
          'time_cell': '提货时间：xx月xx日',
          'limit_num': '99',
          'last_num': '199',
          'price': '99.9',
          'old': '88.8',
          'purchase_img': [noImg, noImg, noImg, noImg, noImg],
          'tag_list': [
            {
              'id': '1',
              'name': '标签一'
            },
            {
              'id': '2',
              'name': '标签二'
            },
            {
              'id': '3',
              'name': '标签三'
            }
          ],
          'cumulative': 1000
        }
      },
    blockType: 'SHETUAN',
    blockClass: 'row_one', // row_one, row_two
    blockStyle: {
      listStyle: 'row_one',
      showTag: true, // 商品标签
      showSell: true, // 商品卖点
      showScribing: true, // 划线价
      showLimit: true, // 商品限购
      showCumulative: true, // 累计销量
      showRecord: true, // 购买记录
      showStock: true, // 库存剩余
      pageMargin: 10, // 页面边距
      proPadding: 10 // 商品间距
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
.layout_main {
  width: 375px;
  margin: 0 auto;
  background: #FFF;
  border-radius: 4%;
  .top {
    padding-top: 10px;
    .top_inner {
      display: flex;
      justify-content: space-between;
      margin: 10px;
      font-size: 26px;

      .nav {
        text-decoration: none;
        color: black;
        font-weight: bold;
        font-size: 15px;
      }
      .t_nav {
        font-size: 10px;
        text-align: center;
        border-radius: 20px;
        color: #909090;
      }
    }
  }
  .bottom {
    .goods_part {
      .goods_img {
        padding: 8px;
        width: 100%;
        height: 250px;
      }
      .text_row {
        .m_title {
          padding:  0px 8px;
          font-size: 16px;
        }
        .s_title {
          padding: 6px 8px 0px 8px;
          color: #909090;
          font-size: 14px;
        }
        .limit_row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 6px 8px;
          white-space: nowrap;
            .time_cell {
              color: #e83227;
              font-size: 12px;
            }
            .last_num {
              span {
                color: #e83227;    
                font-size: 12px;                                                                                                                                                                                                                                       
              }
            }
        }
        .tag-list {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          div:nth-child(1) {
            margin-left: 6px;
          }
          .tag-item {
            padding: 2px 6px;
            margin: 0px 2px;
            border: 1px solid black;
            border-radius: 4px;
            font-size: 12px;
          }
        }
        .sale_row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 8px 4px 8px;
          .sale_price .price {
            padding-left: 2px;
            color: #e83227; 
            font-size: 18px;
          }
          .sale_price .old {
            padding-left: 4px;
            font-size: 14px;
            text-decoration:line-through;
          }
          .sale_btn {
            padding: 8px 12px;
            border-radius: 20px;
            background-color: #F15515;
            color: #FFF;
          }
        }
      }
    }
    .goods_sold {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin: 4px 8px;
      padding: 18px 0px;
      background-color: #FFF;
      .goods_someone {
        padding-top: 6px;
        margin-left: 130px;
        font-size: 12px;
        white-space: nowrap;
      }
      div:nth-child(1) {
        .purchase_img {
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -15px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
      }
      div:nth-child(2) {
        padding: 0 8px;
        margin-right: 20px;
        font-size: 12px;
        white-space: nowrap;
        span {
          color: #909090;
        }
      }
    }
    .goods_sold:before{
      content: '';
      position: absolute;
      width: 200%;
      height: 100%;
      border-top: 1px solid gray;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(0.5, 0.5);
      -ms-transform: scale(0.5, 0.5);
      -o-transform: scale(0.5, 0.5);
      transform: scale(0.5, 0.5);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .goods_separate {
      display: flex;
      .goods_img {
        width: 100px;
        height: 100px;
      }
      .text_row {
        width: 100%;
        padding: 8px 0px;
        font-size: 12px;
      }
    }
  }
}
</style>